import React from "react";
import {StyleSheet, Text, View} from "react-native";
import ProcessBar from "./ProcessBar";
import {facesUtils} from "./faces";


type TextMessageComponentProp = {
    toMe?:number
    text:string // 文本内容
}

export default class TextMessageComponent extends React.Component<TextMessageComponentProp, any> {
    private bar:ProcessBar|any;

    constructor(props:TextMessageComponentProp) {
        super(props);
    }

    // FIXME: 这里会有一个react-native-web 框架BUG, 当 this.props.body 是纯英文时, 若使用了alignSelf= flex-start, flexDirection = row 属性, 会导致Text换行失败
    render() {
        return (
            <View style={{alignSelf:this.props.toMe === 1 ? 'flex-start' : 'flex-end',flexDirection:this.props.toMe === 1 ? 'row' : 'row-reverse'}}>
                <Text style={textMessageStyles.text}>
                    {facesUtils.convertToReactNativeResource(this.props.text)}
                </Text>
            </View>
        )
    }
}


const textMessageStyles = StyleSheet.create({
    container: {
    },
    text:{
        backgroundColor:'#fff',
        paddingLeft:10,
        paddingRight:10,
        paddingTop: 10,
        paddingBottom: 10,
        borderRadius:8,
        flexDirection:'row',
        flexWrap: 'wrap'
    }
});
